<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link th:insert="common/head :: commonheader">

</head>
<body class="login-body">
<div class="container">
    <div class="row">
        <div class="col-md-3">

        </div>
        <div class="col-md-6">
            <div class="login-form">
                <!--                <div class="text-center">-->
                <!--                    <img src="images/logo.png" alt="" width="120" height="100">-->
                <!--                </div>-->

                <div> <h3 style="margin-left: 110px;">注册</h3> </div>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <form class="form-horizontal" th:action="@{/user/register}" method="post">

                            <div class="form-group form-input">
                                <input type="text" class="form-control" placeholder="账号"  name="userName" id="zhname" style="margin-bottom: 0px">
                                <p id="MS"></p>
                                <input type="password" class="form-control" placeholder="密码" name="password"
                                       id="pwd" style="margin-bottom: 0px">
                                <p id="Msg"></p>
                                <input type="password" class="form-control" placeholder="确认密码" style="margin-bottom: 0px" id="pwd1">
                                <p id="Msg1"></p>
                                <button class="btn btn-lg btn-login btn-block" type="submit">
                                    <span class="glyphicon glyphicon-ok"></span>
                                </button>
                                <div class="text-center">
                                    <span style="color:#c7c7c7; font-size: 16px">已有账号？</span>
                                    <a style="color:#6bc5a4; font-size: 16px" th:href="@{/user/login}">去登录</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">

        </div>
    </div>
</div>

<script type="text/javascript">
    window.onload = function () {
        var zhname = document.getElementById("zhname");
        var pdname = /^[\s\S]{6,20}$/
        var MS = document.getElementById("MS");

        var pwd = document.getElementById("pwd");
        var pwd1 = document.getElementById("pwd1");
        var reg = /^[0-9A-Za-z]{6,20}$/
        var Msg = document.getElementById("Msg");
        var Msg1 = document.getElementById("Msg1");

        zhname.onfocus = function () {
            if (pdname.test(zhname.value)){
                MS.innerHTML = '<font color="green">用户名可用</font>'
            }else {
                MS.innerHTML = '<font color="red">用户名格式错误</font>'
            }
        }
        zhname.onblur = function () {
            if (pdname.test(zhname.value)){
                MS.innerHTML = '<font color="green">用户名可用</font>'
            }else {
                MS.innerHTML = '<font color="red">用户名格式错误</font>'
            }
        }


        pwd.onfocus = function () {
            if (!reg.test(pwd.value)){
                Msg.innerHTML = '<font color="red">密码格式错误</font>'
            }else {
                Msg.innerHTML = '<font color="green">密码可用</font>'
            }
        }
        pwd.onblur = function () {
            if (!reg.test(pwd.value)){
                Msg.innerHTML = '<font color="red">密码格式错误</font>'
            }else {
                Msg.innerHTML = '<font color="green">密码可用</font>'
            }
        }

        pwd1.onfocus = function () {
            if (pwd.value === pwd1.value){
                Msg1.innerHTML = '<font color="green">密码可用</font>'
            }else {
                Msg1.innerHTML = '<font color="red">密码不一致</font>'
            }
        }
        pwd1.onblur = function () {
            if (pwd.value === pwd1.value){
                Msg1.innerHTML = '<font color="green">密码可用</font>'
            }else {
                Msg1.innerHTML = '<font color="red">密码不一致</font>'
            }
        }
    }
</script>

</body>
</html>